<script setup>
import {reactive} from "vue";
import {userLogin} from "@/api/user.js";
import user from "@/store/user";
import {message} from "ant-design-vue";
import {useRouter} from "vue-router";

const router = useRouter();

const formState = reactive({
  username: 'test',
  password: '12346789',
});
const rules = {
  username: [
    {required: true, message: '请输入用户名', trigger: 'change'},
    {min: 3, max: 6, message: '长度为3-6个字符', trigger: 'blur'},
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'change'},
    {min: 8, max: 16, message: '长度为8-16个字符', trigger: 'blur'},
  ],
}
const onFinish = (values) => {
  userLogin(values).then((res) => {
    const {code, name, nickName, token} = res;
    user().updateState({code, name, nickName, token})
    router.push({path: '/basic'})
    message.success('登录成功')
  }).catch(err => {
    console.error(err)
  })
};
</script>

<template>
  <div class="login">
    <div class="title">登录</div>
    <a-form :model="formState" :rules="rules" autocomplete="off" hideRequiredMark layout="vertical" @finish="onFinish">
      <a-form-item
          label="用户名"
          name="username"
      >
        <a-input v-model:value="formState.username" placeholder="默认用户：admin|test"/>
      </a-form-item>
      <a-form-item
          label="密码"
          name="password"
      >
        <a-input-password v-model:value="formState.password" placeholder="默认密码：12346789"/>
      </a-form-item>
      <a-form-item>
        <a-button html-type="submit" type="primary">提交</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<style lang="scss" scoped>
.login {
  width: 450px;
  padding: 16px;
  border-radius: 6px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .08);
  background: linear-gradient(to bottom, #f5f6f9 0%, #ffffff 20%);

  .title {
    font-size: 24px;
    text-align: center;
    margin-bottom: 24px;
  }

  :deep(.ant-btn) {
    width: 100%;
  }
}
</style>